import QtQuick
import Qt5Compat.GraphicalEffects

Item {

    Flow {

        anchors.fill: parent
        spacing: 10
        padding: 10

        Rectangle {
            width: 80; height: 80
            color: "lightsteelblue"
        }

        Rectangle {
            width: 80; height: 80
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }

        Rectangle {
            width: 80; height: 80
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }

        Rectangle {
            width: 80; height: 80
            rotation: 90
            gradient: Gradient {
                GradientStop { position: 0.0; color: "lightsteelblue" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }


        Item {
            width: 160; height: 160
            RadialGradient {
                horizontalRadius: 160
                verticalRadius: 160
                anchors.fill: parent

                source: Image{ source: "qrc:/images/butterfly.png" }
                GradientStop {
                    position: 0.0
                    color: "#F0F0F0"
                }
                GradientStop {
                    position: 0.5
                    color: "#000000"
                }
                GradientStop {
                    position: 1.0
                    color: "#F0F0F0"
                }
            }
        }

        Item {
            width: 160; height: 160

            ConicalGradient {
                angle: 0
                horizontalOffset: 0
                verticalOffset: 0
                anchors.fill: parent
                source: Image{ source: "qrc:/images/butterfly.png" }
                GradientStop {
                    position: 0.0
                    color: "#F0F0F0"
                }
                GradientStop {
                    position: 0.5
                    color: "#000000"
                }
                GradientStop {
                    position: 1.0
                    color: "#F0F0F0"
                }
            }
        }

        Item {
            width: 160; height: 160
            LinearGradient {
                start: Qt.point(0,0)
                end: Qt.point(160,160)
                anchors.fill: parent
                source: Image{ source: "qrc:/images/butterfly.png" }
                GradientStop {
                    position: 0.0
                    color: "#F0F0F0"
                }
                GradientStop {
                    position: 0.5
                    color: "#000000"
                }
                GradientStop {
                    position: 1.0
                    color: "#F0F0F0"
                }
            }
        }
    }
}
